<template>
  <div class="witness-page">
    <breadcrumb
      :bread-path-list="breadPathList"
      last-bread-title="轨迹详情"
      :show-back-btn-flag="true"
    >
    </breadcrumb>
    <div class="witness-body">
      <div class="layout-header content-header">
        <p >当前项目:{{ query.projectName }}</p>
      </div>
      <div class="layout-body">
        <div class="ui-title">
        基本信息
        </div>
        <el-descriptions   size="mini"  labelClassName="desLabel"  :column="3" border>
          <el-descriptions-item label="人员姓名">{{ query.personName }}[{{typeRYLB[query.personType]}}]</el-descriptions-item>
          <el-descriptions-item label="项目名称">{{ query.projectName }}</el-descriptions-item>
          <el-descriptions-item label="项目编号">{{ query.projectCode }}</el-descriptions-item>
          <el-descriptions-item label="项目标段">{{ query.bidName  }}</el-descriptions-item>
          <el-descriptions-item label="预警次数">10次</el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
        </el-descriptions>
        <div class="ui-title">
        预警信息
         <div class="layout_content">
            <div class="layout_content_left">
            </div>
            <div class="layout_content_right">
                  <el-scrollbar style="width:100%;">
                      <el-steps  :active="active" class="my-steps">
                          <el-step  v-for="(item,index) in list_step" :key="index"  :icon="item.type == 2 ? 'iconfont icon-jingbaodeng' : 'iconfont icon-bluedian'" :title="item.title" >
                            <i  class="icon-yujing" slot=icon ></i>
                            <template #title>
                                <p @click="fnGetAllAlarmId(item)">{{ item.title }}</p>
                            </template>
                            <template #description>
                              <p v-if="item.title!=='查看'">{{item.time }}</p>
                              <div v-if=" item.show" class="box_description">
                                <div class="close"> <i @click="item.show = false" class="el-icon-close"></i></div>
                                <p>识别到：{{ item.content.alarmTime }}</p>
                                <p>行为：{{ item.content.alarmContent }}</p>
                              </div>
                            </template>
                          </el-step>
                    </el-steps>
                 </el-scrollbar>
                <div class="box_3d">
                  <div class="name_box">轨迹定位图</div>
                  <proViewComponent ref="treeJScans" progress :onGetWanger="onGetWanger" />
                </div>
            </div>
         </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import proViewComponent from "@/views/witness/components/Object3D/proViewComponent.vue";
import { trackListTrack,trackGetAlarm } from "@/api/pageStats"
// import ListCard from "./components/listCard.vue";
// import DialogDetail from "./components/dialog_detail.vue";
export default {
  components: {
    // ListCard,
    // DialogDetail,
    proViewComponent
  },
  data() {
    return {
      typeRYLB:{
        'ZJ': "评标专家",
        'JD': "甲方代表",
        'ZBDL': "招标代理",
      },
      dialogDetail: false,
      active:null,
      query:{},
      breadPathList:[
        {
          title:'统计查询',
          path:'/wintessquery/viewPer'
        },
      ],
      value: "",
      options: [
        {
          label: "项目1",
          value: "1"
        },
        {
          label: "项目2",
          value: "2"
        }
      ],
      list_step:[],
      list_people:[
        {
          label:'评标专家',
          color:' #68F60C',
          children:[
            {
              name:'张三',
              src: require('@/assets/imgs/dp/专家2.png'),
              checked:false
            },
            {
              name:'李四',
              src: require('@/assets/imgs/dp/专家2.png'),
              checked:false
            }
          ]

        },
        {
          label:'专家代理',
          color:'#FFC30A',
          children:[
            {
              name:'张三1',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            },
            {
              name:'李四2',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            }
          ]
        },
        {
          label:'专家代理',
          color:'#EB31D9',
          children:[
            {
              name:'张三1',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            },
            {
              name:'李四2',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            }
          ]
        }
      ],
      cardlist: [
        {
          name: "张三",
          id:1,
          value: "预警1",
          points:{ x: 400, y: 188, z: 3 }
        },
        {
          name: "李四",
          value: "预警2",
          id:'2',
          points: { x: 300, y: 188, z: 3 },
        }
      ],
      curItem: {},
      imgActive: [require("@/assets/imgs/dp/active.png"), require("@/assets/imgs/dp/noactive.png")]
    };
  },
 async created(){
    this.query = this.$route.query;
    console.log('query',this.query);
    await  this.getTrackListTrack()
    this.fnChangeSteps()
    this.huaLine()
  },
  mounted() {
    // this.getAxiosDataYJpoint();
    // this.getAxiosDataRYpoint();
  },
  methods: {
  // 开始画线
  huaLine(){
    this.$refs['treeJScans'].handleLineAll(this.points,['#68F60C'])
    //       {
    //     "projectId": "",
    //     "bidId": "",
    //     "personIds": [
    //     ],
    //     "start": "2024-12-18 11:41:23",
    //     "end": "2024-12-18 11:41:23",
    //     "floorName": ""
    // }
  },
  // 获取步骤条
   async getTrackListTrack(){

  const { personId,projectId,bidId } = this.query
      const params = {
        projectId,
        bidId,
        personIds:[personId],
      }
     const res = await trackListTrack(params)
     if(res.code === 0){
       this.points = res.data
      }

    },
    // 生成步骤条
    fnChangeSteps(){
      let { personId,projectId,bidId,cardBindTime,cardUnBindTime,pbEndTime,pbStartTime } = this.query
      const item = this.points[0].trackList
      const list_step = []
      // const times = [ cardBindTime,  pbStartTime, pbEndTime, cardUnBindTime]
      const times = [ '2024-12-07 21:59:19',  '2024-12-08 02:59:19', '2024-12-09 21:59:19','2024-12-10 21:59:19']
      cardBindTime = times[0]
      pbStartTime = times[1]
      pbEndTime = times[2]
      cardUnBindTime= times[3]
      const texts = ['进入评标区','开始评标','结束评标','离开评标区']
      const convertToTimestamp= ( date)=>{
        return  new Date(date).getTime()
      }
      // 2预警 1普通
      times.forEach((e,i) => {
        let obj = {
          type:1,
          title:texts[i],
          time:times[i],
          show:false
        }
        list_step.push(obj)
      });
      // 获取全部预警
      // const alarmIdList = item.filter(x=>x.type === 1)
      const alarmIdList = [
        {
          "floorName": "十二楼",
          "pos": [54.892, 19.558, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-07 22:59:19",
          "timestamp": convertToTimestamp('2024-12-07 22:59:19'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe26f980062"
        },
        {
          "floorName": "十二楼",
          "pos": [54.892, 19.558, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-07 23:48:18",
          "timestamp": convertToTimestamp('2024-12-07 23:48:18'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe29e5e0075"
        },
        {
          "floorName": "十二楼",
          "pos": [58.033268, 22.66371, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-08 03:48:18",
          "timestamp": convertToTimestamp('2024-12-08 03:48:18'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe285bd0071"
        },
        {
          "floorName": "十二楼",
          "pos": [36.3559, 4.06252, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-09 22:48:56",
          "timestamp": convertToTimestamp('2024-12-09 22:48:56'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe31b270118"
        },
        {
          "floorName": "十二楼",
          "pos": [28.442162, 4.115754, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-09 23:49:07",
          "timestamp": convertToTimestamp('2024-12-09 23:49:07'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe344320145"
        },
        {
          "floorName": "十二楼",
          "pos": [28.430296, 13.751032, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-09 23:49:11",
          "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe353cb014e"
        },
        {
          "floorName": "十二楼",
          "pos": [20.273283, 4.067175, 0],
          "speed": [0, 0, 0],
          "dateTime": "2024-12-09 23:49:18",
          "timestamp": convertToTimestamp('2024-12-09 23:49:11'),
          "stc": 0,
          "type": 1,
          "alarmId": "4028fcf393abe04d0193abe372ca0177"
        },
     ]
      const arr1 = []
      const arr2 = []
      const arr3 = []
      alarmIdList.forEach(x=>{
        const { timestamp,dateTime,alarmId } = x
        let obj = {
            type:2,
            title:'查看',
            time:dateTime,
            alarmId,
            show:false,
            content:null
          }
        if(timestamp > convertToTimestamp(cardBindTime) && timestamp < convertToTimestamp(pbStartTime)){
          arr1.push(obj)
        }else if(timestamp > convertToTimestamp(pbStartTime) && timestamp < convertToTimestamp(pbEndTime)){
          arr2.push(obj)
        }else if(timestamp > convertToTimestamp(pbEndTime) && timestamp < convertToTimestamp(cardUnBindTime)){
          arr3.push(obj)
        }
      })
      this.list_step  = [list_step[0],...arr1,list_step[1],...arr2,list_step[2],...arr3,list_step[3]]
      this.active = this.list_step.length
    },
    async fnGetAllAlarmId(item){
      const r = await trackGetAlarm(item.alarmId)
      if (r.code === 0 ){
          this.$set(item,'content',r.data)
        }
        item.show = true
    },
    handleClickIcon(val){
      console.log(val);
    },
    onGetWanger(msg){
       this.dialogDetail  = true
    },
    handleGotoRight(){
      this.$refs['listCard'].scrollBy(250)
    },
    // 设置人员
    getAxiosDataRYpoint() {
    // 评标专家
    // 招标代理
    // 甲方代表
      const peopleList = [
        {
          type:'PBZJ',
          color:'#68F60C',
          points:[
            { x: 360, y: 220, z: 3 },
            { x: 370, y: 220, z: 3 }
          ]

        },
        {
          type:'ZBDL',
          color:'#FFC30A',
          points:[
            { x: 340, y: 220, z: 3 },
            { x: 350, y: 220, z: 3 }
          ]
        },
        {
          type:'JFDB',
          color:'#EB31D9',
          points:[
            { x: 380, y: 220, z: 3 },
            { x: 390, y: 220, z: 3 }
          ]
        }
      ]
      // this.$refs["treeJScans"].setPeopleRadiusPoints(peopleList);
    },
    //   获取设置预警点位
    getAxiosDataYJpoint() {
      const points = this.cardlist;
      // this.$refs["treeJScans"].setWangerRadiusPoints(points);
    },
    handleDetailClick() {
      this.dialogDetail = true;
    },
    handleSelect(val) {
      this.curItem = val;
    },
    handleChange() {},
    handleRouteFn(){
      this.$router.push({path:'/wintessquery/nowTrajectory'})
    }
  }
};
</script>
<style scoped lang="scss">
$backBG: #2b333f;
$backCard: #193860;
.witness-page {

  // border: 1px solid red;
}
.witness-body {
  height: calc(100vh - 120px);
  background-color: #E5E5E5;
}
.layout-header.content-header {
  background-color: #fff;
  border: 1px solid #D2D2D2;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-left: none;
  border-right: none;
}
.layout-body{
  display: flex;
  margin:10px;
  padding: 10px;
  flex-direction: column;
  background: #fff;
  display: flex;
  ::v-deep .desLabel{
    width: 70px;
  }
  .layout_content{
    display: flex;
    height:calc(100vh - 330px);
    border: 1px solid #C8C8C8;
    // overflow:hidden;
    // flex: 1;
   .layout_content_left{
      // height: calc(100vh - 360px);
      // background-color: #E5E5E5;
      // font-size: 11px;
      // padding: 8px;
      // box-sizing: border-box;
      // .layout_content_left_span{
      //   display: inline-block;
      //   width: 6px;
      //   height: 9px;
      //   margin-right: 4px;
      //   background-color: #1890FF;
      // }
      // .imgbox{
      //   width: 82px;
      //   height: 97px;
      //   box-sizing: border-box;
      //   position: relative;
      //   margin-bottom:10px ;
      //   img{
      //     width: 100%;
      //     height: 100%;
      //   }
      //   div{
      //     position: absolute;
      //     bottom: 0px;
      //     color: #fff;
      //     width: 80px;
      //     height: 20px;
      //     background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.42) 43%, rgba(0,0,0,0.77) 100%);
      //     border-radius: 0px 0px 2px 2px;
      //     p{
      //       line-height: 20px;
      //       text-align: center;
      //     }
      //   }

      // }
    }
    .layout_content_right{
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      ::v-deep .my-steps{
        padding-top: 52px;
        min-height: 90px;
        // transform: scale(0.8);
        // margin-left: -220px;
        .el-step{
          width: 220px;
        }

      }
      .box_3d{
        position: relative;
        background-color: #EEF5FF;
        border-top:1px solid #C8C8C8;
        flex: 1;
        .name_box{
          width: 116px;
          height: 26px;
          text-align: center;
          line-height: 26px;
          color: #fff;
          background-color: #1890FF;
          border-bottom-right-radius: 10px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }
}
.el-icon-sort {
  transform: rotateZ(90deg);
}
.box_description{
  position: absolute;
  top: -50px;
  background: #1890FF;
  border: 1px solid rgba(24,144,255,0.36);
  color: #fff;
  width: 200px;
  text-align: left;
  padding: 8px;
  height: 30px;
  border-radius: 4px;
  .close{
    position: absolute;
    top: 0;
    right: 4px;
  }
}

</style>

